<template>
  <el-card>
    <el-form inline>
      <el-form-item>
        <el-input placeholder="用户名" />
      </el-form-item>
      <el-form-item>
        <el-button :icon="Edit" type="primary">查询</el-button>
        <el-button>清空</el-button>
      </el-form-item>
    </el-form>
    <el-form-item>
      <el-button type="primary" @click="showSaveUser" v-if="userInfoStore.buttons.includes('btn.User.add')">添加</el-button>
      <el-button type="danger">批量删除</el-button>
    </el-form-item>

    <el-table :data="userList" border>
      <el-table-column type="index" label="序号" width="60" align="center" />
      <el-table-column prop="username" label="用户名" />
      <el-table-column prop="nickName" label="用户昵称" />
      <el-table-column prop="roleName" label="角色列表" />
      <el-table-column prop="gmtCreate" label="创建时间" />
      <el-table-column prop="gmtModified" label="更新时间" />

      <el-table-column prop="address" label="操作" width="250">
        <template v-slot="{ row, $index }">
          <el-tooltip content="分配角色" placement="top" effect="light">
            <el-button :icon="User" size="small" @click="showAssignRole(row)" />
          </el-tooltip>
          <el-tooltip content="修改用户" placement="top" effect="light">
            <el-button type="primary" :icon="Edit" size="small" @click="setUserList" />
          </el-tooltip>

          <el-tooltip content="删除用户" placement="top" effect="light"
          
          >
            <el-button type="danger" :icon="Delete" size="small" 
            v-if="userInfoStore.buttons.includes('btn.User.remove')"
           
            />
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      v-model:currentPage="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[3, 6, 9]"
      :total="total"
      layout=" prev, pager, next, jumper,->,total, sizes,"
      @size-change="getUserList"
      @current-change="getUserList"
    />

    <el-dialog v-model="saveUserVisible" title="添加用户">
      <el-form :model="UserFormData" ref="UserFormRef" label-width="100px" :rules="UserRules">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="UserFormData.username" />
        </el-form-item>
        <el-form-item label="用户昵称" prop="nickName">
          <el-input v-model="UserFormData.nickName" />
        </el-form-item>
        <el-form-item label="用户密码" prop="password">
          <el-input v-model="UserFormData.password" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="saveUserVisible = false">取消</el-button>
          <el-button type="primary" @click="submitForm">确定</el-button>
        </span>
      </template>
    </el-dialog>

    <el-dialog v-model="roleUserVisible" title="添加角色">
      <el-form :model="assignRoleFormData" ref="UserFormRef" label-width="100px" :rules="UserRules">
        <el-form-item label="用户名">
          <el-input v-model="assignRoleFormData.username" disabled />
        </el-form-item>
        <el-form-item label="用户列表" prop="roleId">
          <el-checkbox v-model="assignRoleFormData.checkAll" :indeterminate="assignRoleFormData.isIndeterminate" @change="handleCheckAllChange"
            >全选</el-checkbox
          >
          <el-checkbox-group v-model="assignRoleFormData.roleId" @change="handleCheckedChange">
            <el-checkbox v-for="role in assignRoleFormData.allRolesList" :key="role.id" :label="role.id">{{ role.roleName }}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="roleUserVisible = false">取消</el-button>
          <el-button type="primary" @click="submitAssign">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </el-card>
</template>

<script lang="ts">
export default {
  name: "user",
};
</script>

<script lang="ts" setup>
import { Edit, Delete, InfoFilled, Plus, User } from "@element-plus/icons-vue";
import { ref, reactive, onMounted } from "vue";
import { getUserListApi, UserUrlApi, UserAssignApi, getUserRoleListApi } from "@/api/acl/user";
import type { UserList, allRolesList,Items } from "@/api/acl/model/userModel";
import type { FormRules } from "element-plus";
import { ElMessage } from "element-plus";
import { useUserInfoStore } from "@/stores/userInfo";
const userInfoStore = useUserInfoStore();

const currentPage = ref(1);
const pageSize = ref(3);
const total = ref(0);
const userList = ref<UserList>([]);
const username = ref("");

const setUserList = () => {};

const getUserList = async () => {
  const res = await getUserListApi({
    page: currentPage.value,
    limit: pageSize.value,
    username: username.value,
  });
  userList.value = res.items;
  total.value = res.total;
};
onMounted(getUserList);
const saveUserVisible = ref(false);

const UserFormRef = ref();
const UserFormData = reactive({
  username: "",
  password: "",
  nickName: "",
});

//添加按钮
const showSaveUser = () => {
  saveUserVisible.value = true;
  UserFormData.username = "";
  UserFormData.password = "";
  UserFormData.nickName = "";
};

const UserRules = reactive<FormRules>({
  username: [{ required: true, message: "请输入用户名", trigger: "blur" }],
  nickName: [{ required: true, message: "请输入用户昵称", trigger: "blur" }],
  password: [{ required: true, message: "请输入用户密码", trigger: "blur" }],
});
//提交表单
const submitForm = async () => {
  UserFormRef.value?.validate();
  const res = await UserUrlApi(UserFormData);
  
  ElMessage.success("添加成功");
  saveUserVisible.value = false;
  getUserList();
};

//分配角色
const roleUserVisible = ref(false);
const checkAll = ref(false);
const isIndeterminate = ref(true);

const showAssignRole = async (row: Items) => {
  roleUserVisible.value = true;
  const res = await getUserRoleListApi(row.id);
  console.log(row.id)
  assignRoleFormData.roleId = res.assignRoles.map((role) => role.id);
  assignRoleFormData.allRolesList = res.allRolesList;
  assignRoleFormData.isIndeterminate =
    !!assignRoleFormData.roleId.length && assignRoleFormData.roleId.length !== assignRoleFormData.allRolesList.length;
  assignRoleFormData.username = row.username;
  assignRoleFormData.userId = row.id;
};

interface AssignRoleFormData {
  username: string;
  userId: string;
  roleId: string[];
  checkAll: boolean;
  isIndeterminate: boolean;
  allRolesList: allRolesList;
}
const assignRoleFormData = reactive<AssignRoleFormData>({
  username: "",
  userId: "",
  roleId: [],
  checkAll: false, // 全选
  isIndeterminate: false, // 是否半选
  allRolesList: [],
});

const handleCheckAllChange = (val: boolean | string | number) => {
  if (val) {
    assignRoleFormData.roleId = assignRoleFormData.allRolesList.map((role) => role.id);
  } else {
    assignRoleFormData.roleId = [];
  }

  assignRoleFormData.isIndeterminate = false;
};
// 单个选
const handleCheckedChange = () => {
  assignRoleFormData.isIndeterminate =
    !!assignRoleFormData.roleId.length && assignRoleFormData.roleId.length !== assignRoleFormData.allRolesList.length;

  assignRoleFormData.checkAll = assignRoleFormData.roleId.length === assignRoleFormData.allRolesList.length;
};

const submitAssign = async () => {
  await UserAssignApi(assignRoleFormData.userId, assignRoleFormData.roleId );
  getUserList();
  roleUserVisible.value = false;
  ElMessage.success("给用户分配角色成功");
};
</script>

<style scoped></style>
